<template>
    <div class="container">
        <m-header>{{barTitle}}</m-header>
        <div class="main">
            <div class="info-wrap">
                <div class="title">基本信息</div>
                <div class="content">
                    <div class="cell" v-for="(item,index) in fieldList" :key="index" v-show="item.field_id === 'yzm' ? !disabled : true">
                        <m-form
                                :field="item"
                                @change="onChange"
                                :value="value[item.field_id]"
                                :disabled="disabled"
                                :align="item.align"
                        >
                            <template v-if="item.field_id === 'yzm'" slot="value">
                                <van-button class="yzm-btn" plain hairline color="#24C373" size="small" round :disabled="yzmDisabled" @click="getVerificationCode">{{yzmText}}</van-button>
                            </template>
                        </m-form>
                    </div>
                </div>
            </div>

        </div>
        <div class="footer">
            <van-button class="btn" color="#24C373" v-show="disabled" plain @click="onEdit">修改监护人信息</van-button>
            <van-button class="btn" color="#24C373" v-show="!disabled" @click="onSave" :disabled="!yzm" v-prevent-re-click>保存监护人信息</van-button>
        </div>
    </div>
</template>

<script>
    import {getCustomer,editCustomer} from "../../request/api";
    import form from '@/components/form/form'
    import {preventReClick} from "../../utils/plugins";

  export default {
    name: "m-guardian",
    components: {
      "m-form": form
    },
    data(){
      return {
        barTitle: '监护人信息',

        fieldList: [
          {
            label: '监护人姓名',
            type: 'text',
            field_id: 'customer_name'
          },
          {
            label: '手机号',
            type: 'number',
            field_id: 'phone'
          },
          /*{
            type: 'text',
            field_id: 'yzm',
            placeholder: '请输入验证码',
            align: 'left'
          }*/
        ],
        value: {},
        disabled: true,
        yzm: '',
        yzmDisabled: '',
        yzmText: '获取验证码'
      }
    },
    methods: {
      onChange(e){
        let {field,val} = e,
          {field_id} = field;
        if (field_id === 'yzm') this.yzm = val;
        else this.value[field_id] = val;
        let {customer_name,phone} = this.value;
        // this.yzmDisabled = !guardian_name || !guardian_phone;
        this.yzm = customer_name && phone;
      },
      onEdit(){
        this.disabled = false;
      },
      onSave(){
        this.$Loading();

        editCustomer(this.value).then(res => {
          if (res.errcode !== 0)return;
          this.$toast.clear();
          this.$Toast('保存成功');
          this.disabled = true;

          this.$store.dispatch('setCustomer',this.value)
        })
      },
      getVerificationCode(){
        let num = 10;
        this.yzmDisabled = true;
        this.yzmText = num +'秒后重新获取';
        let timer = setInterval(() => {
          num--;
          if (!num) {
            clearInterval(timer);
            this.yzmDisabled = false;
            this.yzmText = '获取验证码'
            return
          }
          this.yzmText = num +'秒后重新获取';
        },1000)
      }
    },
    mounted(){
      this.$Loading();
      getCustomer().then(res => {
        if (res.errcode !== 0) return
        this.$toast.clear();
        let {customer_name,customer_id,phone} = res.row[0];
        this.value = {
          customer_name,customer_id,phone
        };
        console.log(this.value);
      });
    }
  }
</script>

<style scoped lang="less">
    .main{
        padding: 10px;
    }
    .footer{
        padding: 10px;
        .btn{
            width: 100%;}
    }
    .cell{
        .yzm-btn{
            font-size: 14px;
            flex-shrink: 0;
        }
    }
</style>
